<template>
  <el-dialog :title="titleName" top="2vh" width="60%" :visible.sync="visible" center :before-close="modelClose" :close-on-click-modal="false" append-to-body>
    <dd-table ref="dataTable" :data="tableData" rowKey="id" :option="option" :screen="searchForm" :loadingData="loadDataList" @currentChange="clickChange">
      <template slot="condition">
        <el-form-item label="用户姓名">
          <el-input v-model="searchForm.like_name" placeholder="请输入用户姓名" maxlength="32" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户账号">
          <el-input v-model="searchForm.like_username" placeholder="请输入用户账号" maxlength="32" clearable></el-input>
        </el-form-item>
      </template>

      <template slot="operation">
        <el-form-item>
          <el-button type="search" size="small" @click="onSearch" v-if="showButton($route.path, '查询')">查询</el-button>
        </el-form-item>
      </template>

      <el-table-column align="center" width="55" label="选择">
        <template slot-scope="scope">
          <el-radio class="radio" v-model="templateSelection" :label="scope.row">&nbsp;</el-radio>
        </template>
      </el-table-column>

      <el-table-column prop="name" label="用户姓名" align="center"></el-table-column>
      <el-table-column prop="username" label="用户账号" align="center"></el-table-column>
      <el-table-column prop="mobile" label="手机" align="center">
        <template slot-scope="scope">
          {{ scope.row.mobile || '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="email" label="电子邮件" align="center">
        <template slot-scope="scope">
          {{ scope.row.email || '-' }}
        </template>
      </el-table-column>
    </dd-table>

    <div slot="footer">
      <el-button type="primary" @click="submit" :loading="loading">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'selectUserDialog',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      titleName: '用户列表',
      formLabelWidth: '80px',
      loading: false,
      searchForm: {
        pageIndex: 1,
        pageSize: 10,
        admin: 0
      },
      tableData: [],
      option: {
        total: 0,
        loading: true,
        operation: true,
        expandHide: true
      },
      templateSelection: null
    }
  },
  computed: {
    ...mapGetters('ddAdmin/menu', ['showButton'])
  },
  mounted() {
    this.loadDataList();
  },
  methods: {
    onSearch() {
      this.searchForm.pageIndex = this.$options.data().searchForm.pageIndex;
      this.loadDataList();
    },
    async loadDataList() {
      try {
        let count = await this.$api.user.findUserListMax(this.searchForm);
        let result = await this.$api.user.findUserList(this.searchForm);
        this.option.total = count.value;
        this.tableData = result.value;
        this.option.loading = false;
      } catch (error) {
        //处理错误
        if (error.description) {
          console.log(error.description);
        }
        this.option.loading = false;
      }
    },
    clickChange(currentRow, oldCurrentRow) {
      this.templateSelection = currentRow;
      console.log('templateSelection:', this.templateSelection);
    },
    submit() {
      this.$emit('selectedItem', this.templateSelection);
      this.modelClose();
    },
    // 对话框关闭
    modelClose() {
      // this.resetForm();
      this.$emit('update:visible', false); // 直接修改父组件的属性
    },
  }

}
</script>

<style lang="scss" scoped>
</style>